<template>
    <div>
        购物车
        <table border="1" cellpadding="15" cellspacing="0">
            <tr>
                <td>
                    <input type="checkbox" v-model="checked" @change="changeCheck()">
                </td>
                <td>
                    名称
                </td>
                <td>
                    单价
                </td>
                <td>
                    数量
                </td>
                <td>
                    小计
                </td>
                <td>
                    操作
                </td>
            </tr>
            <tr v-for="item in goods_list" :key="item.id">
                <td>
                    <input type="checkbox" v-model="item.checked" @change="changeItemCheck()">
                </td>
                <td>
                    {{ item.name }}
                </td>
                <td>
                    ￥{{ item.price }}
                </td>
                <td>
                    <button :disabled="item.number <= 1 ? true: false" @click="item.number--">
                        ➖
                    </button>
                    <input :readonly="item.number <= 1 ? true: false" type="text" v-model="item.number">
                    <button @click="item.number++">
                        ➕
                    </button>
                </td>
                <td>
                    ￥{{ item.price * item.number }}
                </td>
                <td>
                    <button @click="del(item.id)">
                        删除
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    总价
                </td>
                <td colspan="5">
                    <!-- 使用计算属性 -->
                    ￥{{ total }}
                </td>
            </tr>
        </table>
        <button @click="total = '修改属性值'">
            修改计算属性
        </button>
    </div>
</template>

<script>
    export default {
        // 数据
        data(){
            return {
                goods_list: [
                    {
                        id: 0,
                        name: '键盘',
                        price: '500',
                        number: 1,
                        checked: false
                    },
                    {
                        id: 1,
                        name: '鼠标',
                        price: '250',
                        number: 2,
                        checked: false
                    },
                    {
                        id: 2,
                        name: '耳机',
                        price: '1500',
                        number: 8,
                        checked: false
                    }
                ],
                // 专门记录当前的全选按钮的状态
                checked: false
            }
        },
        // 监听
        watch:{
            // /* 
            //     要监听的值(n,o){
            //         n最新的值
            //         o是改变前的值
            //     }
            // */
            // checked(n,o){
            //     // console.log(n,o);
            //     // 改变后的值 n
            // }

            // 监听对象属性
            goods_list: {
                // 监听方法写在
                handler(n,o){
                    console.log(n,o);
                },
                // 开启深度监听，默认 false
                /* 
                    当我们开启了深度监听之后，
                    监听的属性里面发生了值的变化
                    就会触发监听，
                    如果不开启只会监听属性的长度
                */
                deep: true,
                // 立即执行
                /* 
                    当goods_list (beforeCreate生命周期)
                    初始化的时候就开始监听
                */
                immediate: true
            }

            // goods_list(n,o){
            //     // 默认监听对象，只会监听对象属性的长度
            //     console.log(n,o);
            // }
        },
        // 计算属性
        computed:{
            // 属性
            // total(){
            //     // 已经定义好了一个属性
            //     // 初始化总价
            //     let count = 0;
            //     // 处理属性的复杂逻辑
            //     this.goods_list.forEach(item => {
            //         // 如果当前的数据被选中
            //         if(item.checked == true){
            //             count += item.price * item.number
            //         }
            //     })
            //     /* 
            //         计算属性会监听，写的处理逻辑里面的代码，
            //         用到了哪些数据，并且监听他们值的变化，
            //         每当里面的值发生变化的时候，计算属性
            //         都会重新运行一次;
            //         并且把最新计算好的值，返回出去
            //     */
            //     // 属性必须有一个返回值
            //     return count
            // }
            total:{
                // getter
                get(){
                    // 是最后属性的返回值
                        // 初始化总价
                let count = 0;
                // 处理属性的复杂逻辑
                this.goods_list.forEach(item => {
                    // 如果当前的数据被选中
                    if(item.checked == true){
                        count += item.price * item.number
                    }
                })
                /* 
                    计算属性会监听，写的处理逻辑里面的代码，
                    用到了哪些数据，并且监听他们值的变化，
                    每当里面的值发生变化的时候，计算属性
                    都会重新运行一次;
                    并且把最新计算好的值，返回出去
                */
                // 属性必须有一个返回值
                return count
                },
                // setter
                set(val){
                    // 直接给计算属性赋值的时候，会触发
                    // 形参val 是要给属性赋得值
                    // console.log(val);
                    // 这里可以去处理 赋值的逻辑 但是 不能够
                    // 直接给计算属性赋值
                }
            }
        },
        // 事件
        methods: {
            del(id){
                // console.log(id);
                // 过滤器
                this.goods_list = this.goods_list.filter(item => item.id != id);
            },
            changeCheck(){
                // 遍历数据
                this.goods_list.forEach(item => item.checked = this.checked);
            },
            changeItemCheck(){
                // 初始化选中的个数
                let count = 0;
                // 遍历数据
                this.goods_list.forEach(item => {
                    if(item.checked == true){
                        // 选中个数+1
                        count ++
                    }
                })
                // 判断 如果 选中的个数等于数据的长度 则全选按钮 选中
                this.checked = count == this.goods_list.length;
            }
        }
    }
</script>